import { defineComponent, ref, Teleport, onMounted } from 'vue'
import { NButton, NModal } from 'naive-ui'
import modeler from '@/store/modeler'
import { useI18n } from 'vue-i18n'
import CloneModal from './Child/CloneModal.vue'
import qs from 'qs'
import { processApi } from '@/api/modules/process'

const Clones = defineComponent({
  name: 'Clones',
  setup() {
    const { t } = useI18n()
    const showModal = ref(false)

    const modelerStore = modeler()

    const clone = (xml: string) => {
      showModal.value = false
      modelerStore.getModeler!.importXML(xml)
    }

    // shilei 初始加载流程xml 2023-10-05
    const loadFlow = () => {
      const flow = qs.parse(location.href.split('?')[1])
      if (flow && flow['key']) {
        const key = flow['key']
        processApi.findXmlByKey(key).then((resp) => {
          console.log(resp)
          if (resp.success && resp.data) {
            modelerStore.getModeler!.importXML(resp.data)
          }
        })
      }
    }
    onMounted(loadFlow)

    return () => (
      <span>
        <NButton
          style={{ borderRadius: '0' }}
          type="info"
          secondary
          onClick={() => (showModal.value = true)}
        >
          {t('toolbar.clone')}
        </NButton>
        <CloneModal
          show={showModal.value}
          onClose={() => (showModal.value = false)}
          onSelect={clone}
        />
      </span>
    )
  }
})

export default Clones
